<template>
	<view class="toast_mode">
		<view class="alert_content">
			<view class="del" @click="cancel">
				<image src="../../../static/delete.png" mode="aspectFill"></image>
			</view>
			<view class="alert_top_title">
				拒单原因
			</view>
			<view class="alert_center">
				<textarea class="backOrderReason" placeholder="请输入拒单原因" v-model="reasonTxt" />
			</view>
			<view class="alert_btn" @click="submit">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			orderSn:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				reasonTxt:''
			}
		},
		methods: {
			cancel(){
				this.$emit('cancelBackOrder')
			},
			submit(){
				console.log(this.reasonTxt)
				console.log(this.orderSn)
				this.$emit('submitBackOrder',{backOrderText:this.reasonTxt,orderNo:this.orderSn})
			}
		}
	}
</script>

<style>
	.toast_mode{
		background-color: rgba(0,0,0,0.6);
		position: fixed;
		width: 750rpx;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 999999;
	}
	.alert_content{
		width: 600rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		z-index: 1000000;
		position: absolute;
		top: 308rpx;
		left: 76rpx;
	}
	.del{
		width: 600rpx;
		float: right;
	}
	.del image{
		width: 22rpx;
		height: 22rpx;
		margin: 28rpx 28rpx 0 0;
		float: right;
	}
	.alert_top_title{
		width: 600rpx;
		height: 50rpx;
		line-height: 50rpx;
		float: left;
		text-align: center;
		font-size: 36rpx;
		color: #191B1E;
	}
	.alert_center{
		width: 600rpx;
		height: auto;
		margin: 20rpx 0 0 32rpx;
		float: left;
	}
	.backOrderReason{
		width: 508rpx;
		height: 400rpx;
		padding: 28rpx 0 0 34rpx;
		background-color: #F8F8F8;
		border-radius: 24rpx;
		color: #999999;
		font-size: 28rpx;
		text-align: left;
	}
	.alert_btn{
		width: 510rpx;
		height: 92rpx;
		background-image:linear-gradient(#6B96FE,#4D84FE);
		color: #F9F9F9;
		font-size: 28rpx;
		line-height: 92rpx;
		text-align: center;
		margin: 36rpx 0 36rpx 46rpx;
		float: left;
		border-radius: 46rpx;
	}
</style>
